import React, { useState, useEffect } from 'react';
import './index.scss'
import axios from 'axios';
const Type = ({ history }) => {
    const [typeList, setTypeList] = useState([])
    const [activeInd, setActiveInd] = useState(0)
    useEffect(() => {
        axios.get('/type').then(res => {
            setTypeList(res.data)
        })
    }, [])
    return (
        <Slider>
            <SliderLeft typeList={typeList} activeInd={activeInd} setActiveInd={setActiveInd}></SliderLeft>
            <SliderRight activeInd={activeInd} typeList={typeList} history={history}></SliderRight>
        </Slider>
    );
}
function Slider(props) {
    return <div className="slider">
        {props.children}
    </div>
}
function SliderLeft({ typeList, activeInd, setActiveInd }) {
    return <div className="silder_left">
        {typeList.map((item, index) => {
            return <div
                className={activeInd == index ? 'type_list active' : 'type_list'}
                onClick={() => {
                    setActiveInd(index)
                }}
            >
                {item.title}
            </div>
        })}
    </div>
}
function SliderRight({ typeList, activeInd, history }) {
    return <div className="silder_right">
        {typeList[activeInd] ? typeList[activeInd].children.map(item => {
            return <div>
                <div className="title">
                    {item.title}
                </div>
                <div className="content">
                    {item.children.map((item2, index) => {
                        return <div key={index} onClick={() => {
                            history.push('/list/' + item2.parent_id)
                        }}>
                            <img src={item2.image} alt="" />
                            {item2.title}
                        </div>
                    })}
                </div>
            </div>
        }) : ''}
    </div>
}



export default Type;
